<script lang="ts" setup>
import { useStore } from '@/stores';
import { CategrayType } from '@/typings';
import { Delete } from '@element-plus/icons-vue';
import { computed, ref } from 'vue';

const store = useStore();

// const title = computed(() => {
//   const { userName } = store.userInfo;
//   return userName === 'default' ? '默认用户' : userName;
// });

const gameList = computed(() =>
  store.gameList
    .filter((i) => store.userInfo.game?.has(i.index))
    .map((i) => ({ ...i, rom: i.minimum.rom[0] })),
);
const movieList = computed(() =>
  store.movieList
    .filter((i) => store.userInfo.movie?.has(i.index))
    .map((i) => ({ ...i, rom: i.minimum.rom[0] })),
);
const teleplayList = computed(() =>
  store.teleplayList
    .filter((i) => store.userInfo.teleplay?.has(i.index))
    .map((i) => ({ ...i, rom: i.minimum.rom[0] })),
);

const activeName = ref<CategrayType>('game');
const tableData = computed(() =>
  activeName.value === 'game'
    ? gameList.value
    : activeName.value === 'movie'
    ? movieList.value
    : teleplayList.value,
);

const getSummaries = ({ data }) => {
  const result = data.reduce((sum, curr: { rom: string }) => {
    let size = 0;
    const rom = curr.rom.toUpperCase();
    if (rom.indexOf('MB') >= 0) {
      size = Number(rom.replace('MB', '')) / 1024;
    } else if (rom.indexOf('GB') >= 0) {
      size = Number(rom.replace('GB', ''));
    }
    return sum + size;
  }, 0);
  return ['合计', '', result.toFixed(2) + 'GB', ''];
};

const handleRemove = (row) => {
  store.changeCollect(activeName.value, row.index, false);
};

const emits = defineEmits<{ (e: 'close') }>();

const close = () => emits('close');
</script>

<template>
  <el-dialog class="user-dialog" :model-value="true" @closed="close" fullscreen>
    <template #header>
      <el-tabs class="user-tabs" v-model="activeName">
        <el-tab-pane name="game">
          <template #label>
            <el-badge :value="gameList.length" :hidden="!gameList.length" :max="999">
              游戏
            </el-badge>
          </template>
        </el-tab-pane>
        <el-tab-pane name="movie">
          <template #label>
            <el-badge :value="movieList.length" :hidden="!movieList.length" :max="999">
              电影
            </el-badge>
          </template>
        </el-tab-pane>
        <el-tab-pane name="teleplay">
          <template #label>
            <el-badge :value="teleplayList.length" :hidden="!teleplayList.length" :max="999">
              剧集
            </el-badge>
          </template>
        </el-tab-pane>
      </el-tabs>
    </template>
    <el-scrollbar height="calc(100vh - 56px)">
      <div class="container">
        <el-table
          :data="tableData"
          :summary-method="getSummaries"
          show-summary
          height="calc(100vh - 96px)"
          style="width: 100%"
        >
          <el-table-column prop="index" label="序号" width="60" align="center" />
          <el-table-column prop="name" label="内容" />
          <el-table-column prop="rom" label="存储" width="100" align="right" />
          <el-table-column fixed="right" label="操作" width="56" align="center">
            <template #default="{ row }">
              <el-button link type="danger" @click="handleRemove(row)">
                <el-icon><Delete /></el-icon>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-scrollbar>
  </el-dialog>
</template>

<style lang="scss" scoped>
:global(.user-dialog .el-dialog__header) {
  position: relative;
  margin-right: 0;
  padding-top: 16px;
  padding-bottom: 0;
  box-shadow: var(--el-box-shadow-light);
  z-index: 1;
}
:global(.user-dialog .el-dialog__headerbtn) {
  top: 2px;
  font-size: 20px;
}
:global(.user-dialog .el-dialog__body) {
  padding: 0;
}
.user-tabs {
  :deep(.el-tabs__header) {
    margin: 0;
  }
  :deep(.el-tabs__item) {
    font-size: 18px;
  }
  :deep(.el-tabs__nav-wrap::after) {
    height: 0;
  }
}
</style>
